<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryParams" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  v-model="queryParams.storeId"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in $store.state.user.stores"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="用户昵称" prop="nickname">
                <el-input
                  v-model="queryParams.nickname"
                  placeholder="请输入昵称"
                  class="w-100"
                  @keyup.enter.native="handleQuerys"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="手机号" prop="userMobile">
                <el-input
                  v-model="queryParams.userMobile"
                  placeholder="请输入手机号"
                  class="w-100"
                  @keyup.enter.native="handleQuerys"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="用户类型" prop="userType">
                <el-select
                  v-model="queryParams.userType"
                  placeholder="请选择"
                  filterable
                  class="w-200"
                >
                  <el-option
                    v-for="(item, index) in userTypeOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuerys">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <div class="table_card">
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">用户列表</div>
        <div class="op_right">
          <button class="primary_button" @click="NewAddFranchisees">
            新增加盟商
          </button>
          <button class="primary_button" @click="NewUser">新增用户</button>
        </div>
      </div>

      <div class="table_list">
        <el-table :data="tabList" stripe style="width: 100%">
          <el-table-column prop="deptName" label="部门"></el-table-column>
          <el-table-column prop="nickname" label="用户名称"></el-table-column>
          <el-table-column
            prop="userTypeName"
            label="用户类型"
          ></el-table-column>
          <el-table-column prop="mobile" label="手机号"></el-table-column>
          <el-table-column prop="" label="自动添加门店">
            <template slot-scope="scope">
              <div class="emptyBox" @click="ChangeSwitch(scope.row)">
                <div class="empty"></div>
                <el-switch
                  v-model="scope.row.storeAdd"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="Y"
                  inactive-value="N"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="450px">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="text" @click="EditSource(scope.row)"
                >编辑</el-button
              >
              <span class="separate_right">|</span> -->

              <el-button size="mini" type="text" @click="SetStore(scope.row.id)"
                >设置门店</el-button
              >
              <span class="separate_right">|</span>
              <el-button size="mini" type="text" @click="SetRole(scope.row)"
                >设置角色</el-button
              >
              <span class="separate_right">|</span
              ><el-button size="mini" type="text" @click="DelUser(scope.row.id)"
                >删除</el-button
              >
              <span class="separate_right">|</span
              ><el-button
                size="mini"
                type="text"
                @click="UpdateUserType(scope.row)"
                >修改用户类型</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <!-- 新增用户 -->
      <el-dialog
        :visible.sync="userdialogVisible"
        width="1200px"
        :title="title"
        class="no-dialog-padding"
        @close="CanceluserSubmit"
      >
        <span>
          <div class="searchBox">
            <div class="user_input">
              <el-input
                v-model="queryParam.nickName"
                placeholder="请输入用户名称"
              ></el-input>
            </div>
            <div class="user_input">
              <el-input
                v-model="queryParam.mobile"
                placeholder="请输入手机号"
              ></el-input>
            </div>
            <div class="searchBtns">
              <el-button type="primary" @click="handleQuery">搜索</el-button>
            </div>
          </div>
          <div class="source_box">
            <el-table :data="userList" stripe style="width: 100%">
              <el-table-column width="40px">
                <template slot-scope="scope">
                  <el-radio
                    class="none-lable"
                    v-model="radio"
                    :label="scope.row.id"
                    @input="inputRadio(scope.row)"
                  >
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column
                prop="badgeNumber"
                label="工号"
              ></el-table-column>
              <el-table-column prop="nickname" label="用户名称" width="300px">
              </el-table-column>
              <el-table-column prop="mobile" label="手机号"></el-table-column>
              <el-table-column prop="stageName" label="艺名"></el-table-column>
            </el-table>
            <pagination
              :total="totals"
              :page.sync="queryParam.pageNo"
              :limit.sync="queryParam.pageSize"
              @pagination="getLists"
            />
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button class="cancel_btn" @click="CanceluserSubmit"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="userSubmit"
            :loading="CreateClienLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 设置角色 -->
      <el-dialog
        title="设置角色"
        :visible.sync="openRole"
        width="500px"
        append-to-body
        :before-close="RoleFormClose"
      >
        <el-form
          :model="roleForm"
          ref="roleForm"
          :rules="roleRules"
          label-width="80px"
        >
          <el-form-item label="用户名称" prop="nickname">
            <el-input v-model="roleForm.nickname" :disabled="true" />
          </el-form-item>
          <el-form-item label="角色" prop="roleIds">
            <el-select v-model="roleForm.roleIds" multiple placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="parseInt(item.id)"
                :label="item.name"
                :value="parseInt(item.id)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitRole">确 定</el-button>
          <el-button @click="RoleFormClose">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 设置门店 -->
      <Stores ref="stores" @change="changeStores"></Stores>

      <!-- 列表 点击查看 -->
      <el-dialog
        title="设置门店"
        :visible.sync="CheckStoresdialogVisible"
        width="450px"
        :before-close="CancleCheckStore"
      >
        <span>
          <el-form
            :model="StoresForm"
            :rules="StoresRules"
            ref="StoresForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div @click="SelectChange">
              <el-form-item label="门店名称" prop="storeName">
                <el-input readonly v-model="StoresForm.storeName"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CancleCheckStore">取 消</el-button>
          <el-button type="primary" @click="CheckStore">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 新增加盟商账号 -->
      <el-dialog
        title="新增加盟商账号"
        :visible.sync="newFranchiseesVis"
        width="500px"
        :before-close="CancleFranchisees"
      >
        <span>
          <el-form
            :model="FranchiseesForm"
            :rules="FranchiseesRules"
            ref="FranchiseesForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="部门" prop="deptId">
              <treeselect
                v-model="FranchiseesForm.deptId"
                :options="deptOptions"
                :show-count="true"
                :clearable="false"
                placeholder="请选择归属部门"
                :normalizer="normalizer"
              />
            </el-form-item>
            <div @click="SelectFranchisees">
              <el-form-item label="门店" prop="storeName">
                <el-input
                  readonly
                  v-model="FranchiseesForm.storeName"
                  class="w-100"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item label="姓名" prop="nickname">
              <el-input
                v-model="FranchiseesForm.nickname"
                class="w-100"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="FranchiseesForm.mobile"
                class="w-100"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="passWord">
              <el-input
                v-model="FranchiseesForm.passWord"
                type="text"
                style="text-security: disc; -webkit-text-security: disc"
                class="w-100 pwd"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item label="角色" prop="roleIds">
              <el-select
                v-model="FranchiseesForm.roleIds"
                multiple
                placeholder="请选择"
                class="w-100"
              >
                <el-option
                  v-for="item in roleOptions"
                  :key="parseInt(item.id)"
                  :label="item.name"
                  :value="parseInt(item.id)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CancleFranchisees">取 消</el-button>
          <el-button type="primary" @click="SaveFranchisees">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改用户类型 -->
      <el-dialog
        title="修改用户类型"
        :visible.sync="UpdateUserTypeVis"
        width="500px"
        append-to-body
        :before-close="UpdateUserTypeClose"
      >
        <el-form
          :model="UpdateUserTypeForm"
          ref="UpdateUserTypeForm"
          :rules="UpdateUserTypeRules"
          label-width="80px"
        >
          <el-form-item label="用户类型" prop="userType">
            <el-select
              v-model="UpdateUserTypeForm.userType"
              placeholder="请选择"
              class="w-100"
              clearable
            >
              <el-option
                v-for="item in UpdateUserTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitUpdateUserType"
            >确 定</el-button
          >
          <el-button @click="UpdateUserTypeClose">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getUsersInfo,
  getStoresUserInfo,
  getAllStoreRole,
  CreateUserRole,
  CreateStoresUserInfo,
  deleteStoresUserInfo,
  SetStores,
  InquireStores,
  AddAgentUser,
  UpdateUserType,
  EditUserSstoreAdd,
} from "@/api/bpm/users";
import { getRole } from "@/api/system/role";
import { phoneTest } from "@/utils/regular";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { listSimpleDepts } from "@/api/system/dept";
import { listUser } from "@/api/system/user";
import Stores from "@/components/Stores/storeModel";

export default {
  name: "EryuoaStoreFrontendClientlist",
  components: { Stores, Treeselect },
  data() {
    return {
      newFranchiseesVis: false,
      FranchiseesForm: {
        deptId: null,
        mobile: "",
        nickname: "",
        passWord: "",
        roleIds: [],
        storeIds: [],
      },
      FranchiseesRules: {
        deptIds: [{ required: true, message: "请选择", trigger: "change" }],
        mobile: [
          { required: true, message: "请选输入手机号" },
          {
            validator: this.checkPhone,
            trigger: "blur",
          },
        ],
        nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
        roleIds: [{ required: true, message: "请选择", trigger: "blur" }],
        storeIds: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      userTypeOptions: [
        {
          value: "A",
          label: "加盟商",
        },
        {
          value: "S",
          label: "管理员",
        },
      ],
      roleForm: {
        roleIds: [],
      }, // 设置角色
      defaultProps: {
        label: "name",
        children: "children",
      },
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [], // 部门属性结构
      depts: [], // 部门列表
      openRole: false,
      userdialogVisible: false, // 新增用户
      loading: false,
      userList: [], // 用户列表
      tabList: [],
      title: "",
      userloading: false,
      totals: 0,
      radio: "",
      CreateClienLoading: false,
      roleForm: {
        userId: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
      },

      StoresRules: {
        storeName: [
          { required: true, message: "请选择应用门店", trigger: "change" },
        ],
      },

      roleRules: {
        roleIds: [
          { required: true, message: "请选择设置角色", trigger: "change" },
        ],
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: "",
        userMobile: "",
        userType: "",
      },
      // 查询参数
      queryParam: {
        pageNo: 1,
        pageSize: 10,
        nickName: "",
        mobile: "",
      },
      // 角色选项
      roleOptions: [],
      total: 0,

      CheckStoresdialogVisible: false, // 点击查看门店
      StoresList: [], // 应用门店
      StoresForm: {
        id: "",
        storeName: "",
        storeList: [],
      },
      users: [],

      userTypeNameObj: {
        A: "加盟商",
        S: "管理员",
      },

      UpdateUserTypeOptions: [
        {
          value: "A",
          label: "加盟商",
        },
        {
          value: "S",
          label: "管理员",
        },
      ],
      UpdateUserTypeForm: {
        userType: "", // 用户类型
        id: "", // 用户id
      },
      UpdateUserTypeRules: {
        userType: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
      },
      UpdateUserTypeVis: false,
    };
  },

  created() {
    this.getList();
  },

  mounted() {},

  methods: {
    ChangeSwitch(row) {
      let status = row.storeAdd === "Y" ? "关闭" : "开启";
      this.$confirm("确认要" + status + "自动添加门店吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          EditUserSstoreAdd({
            id: row.id,
            storeAdd: row.storeAdd === "Y" ? "N" : "Y",
          })
            .then((Res) => {
              // console.log("修改按钮开关状态", Res);
              this.getList();
            })
            .catch((err) => {});
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {});
    },
    // 修改用户类型
    UpdateUserType(row) {
      this.UpdateUserTypeForm.id = row.id;
      this.UpdateUserTypeForm.userType = row.userType;
      this.UpdateUserTypeVis = true;
    },

    UpdateUserTypeClose() {
      this.UpdateUserTypeVis = false;
      this.$nextTick(() => {
        this.resetFormData("UpdateUserTypeForm");
      });
    },

    // 修改用户类型 确定
    submitUpdateUserType() {
      this.$refs["UpdateUserTypeForm"].validate((valid) => {
        if (valid) {
          UpdateUserType(this.UpdateUserTypeForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.UpdateUserTypeClose();
                this.getList();
              }
            })
            .catch((err) => {});
        } else {
        }
      });
    },

    checkPhone(rule, value, callback) {
      if (!phoneTest(value) && !!value) {
        callback(new Error("请输入正确手机号格式"));
      } else {
        callback();
      }
    },

    CancleFranchisees() {
      this.resetFormData("FranchiseesForm");
      this.$nextTick(() => {
        this.newFranchiseesVis = false;
        this.FranchiseesForm.storeIds = [];
      });
    },
    // 确定 添加加盟商账号
    SaveFranchisees() {
      let FranchiseesForm = JSON.parse(JSON.stringify(this.FranchiseesForm));
      FranchiseesForm.storeIds = this.FranchiseesForm.storeIds.map((item) => {
        return item.id;
      });
      this.$refs["FranchiseesForm"].validate((valid) => {
        if (valid) {
          AddAgentUser(FranchiseesForm)
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.CancleFranchisees();
                this.getList();
              }
            })
            .catch((err) => {});
        } else {
        }
      });
    },

    NewAddFranchisees() {
      this.newFranchiseesVis = true;
      this.getAllStoreRoles();
      // 获得部门列表
      this.deptOptions = [];
      listSimpleDepts().then((response) => {
        // 处理 deptOptions 参数
        this.deptOptions = [];
        this.deptOptions.push(...this.handleTree(response.data, "id"));
      });
    },

    // 格式化部门的下拉框
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },

    changeStores(res) {
      console.log(res);
      const { storeName, list } = res;
      this.StoresForm.storeName = storeName;
      this.StoresForm.storeList = list.map((item) => {
        return { id: item.id, name: item.name };
      });
      this.FranchiseesForm.storeIds = list.map((item) => {
        return { id: item.id, name: item.name };
      });
      this.FranchiseesForm.storeName = storeName;
      // console.log(this.StoresForm.storeList);
    },

    SelectChange() {
      this.$refs.stores.applyStore(this.StoresForm.storeList);
      this.$refs.stores.getStoresList(); // 调用子组件的方法
    },

    SelectFranchisees() {
      this.$refs.stores.applyStore(this.FranchiseesForm.storeIds);
      this.$refs.stores.getStoresList(); // 调用子组件的方法
    },

    // 取消 查看门店
    CancleCheckStore() {
      this.StoresForm.storeName = "";
      this.StoresForm.storeList = [];
      this.$nextTick(() => {
        this.CheckStoresdialogVisible = false;
      });
    },

    SelectedStores() {
      InquireStores({ id: this.StoresForm.id })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.StoresForm.storeList = data.map((item) => {
              return { id: item.id, name: item.name };
            });
            let storeName = data.map((item) => {
              return item.name;
            });
            this.StoresForm.storeName = storeName.join(",");
          }
        })
        .catch((err) => {});
    },

    // 确认
    CheckStore() {
      this.$refs["StoresForm"].validate((valid) => {
        if (valid) {
          let storesIds = [];
          for (let i = 0; i < this.StoresForm.storeList.length; i++) {
            let Item = this.StoresForm.storeList[i];
            storesIds.push(Item["id"]);
          }

          console.log(storesIds);

          SetStores({
            id: this.StoresForm.id,
            storeIds: storesIds,
          })
            .then((Res) => {
              const { code } = Res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.CancleCheckStore();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 设置门店
    SetStore(id) {
      this.CheckStoresdialogVisible = true;
      this.StoresForm.id = id;
      this.SelectedStores();
    },

    inputRadio(row) {
      console.log(row);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNo = 1;
      this.getLists();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryParams");
      this.handleQuerys();
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    handleQuerys() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    getAllStoreRoles(id) {
      getAllStoreRole({ id: id })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.roleOptions = data;
          }
        })
        .catch((err) => {});
    },

    // 查询门店用户角色
    getStoresUserInfos(id) {
      getStoresUserInfo({ id: id })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            let roleIds = [];
            for (let i = 0; i < data.length; i++) {
              let items = data[i];
              roleIds.push(items.id);
            }
            this.roleForm.roleIds = roleIds;
          }
        })
        .catch((err) => {});
    },

    /** 查询用户列表 */
    getLists() {
      this.userloading = true;
      listUser(this.queryParam).then((response) => {
        this.userList = response.data.list;
        this.totals = response.data.total;
        this.userloading = false;
      });
    },

    // 用户列表
    getList() {
      this.loading = true;
      getUsersInfo(this.queryParams)
        .then((res) => {
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.tabList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CanceluserSubmit() {
      this.CreateClienLoading = false;
      this.$nextTick(() => {
        this.userdialogVisible = false;
        this.radio = "";
      });
    },

    SetRole(row) {
      // console.log(row);
      this.openRole = true;
      this.roleForm.nickname = row.nickname;
      this.roleForm.userId = row.id;
      this.getAllStoreRoles(row.id);
      this.getStoresUserInfos(row.id);
    },

    // 设置角色 确定
    submitRole() {
      this.$refs["roleForm"].validate((valid) => {
        if (valid) {
          CreateUserRole({
            roleIds: this.roleForm.roleIds,
            userId: this.roleForm.userId,
          })
            .then((Res) => {
              const { code } = Res;
              if (code === 0) {
                this.RoleFormClose();
                this.$message.success("操作成功");
              }
            })
            .catch((err) => {});
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },

    RoleFormClose() {
      this.openRole = false;
      this.$nextTick(() => {
        this.roleForm.roleIds = [];
      });
    },

    // 新增用户
    userSubmit() {
      if (!this.radio) {
        this.$message.error("请选择用户");
        return false;
      }
      // console.log(this.radio);
      CreateStoresUserInfo({ id: this.radio })
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.CanceluserSubmit();
            this.$message.success("操作成功");
            this.getList();
          }
        })
        .catch((err) => {});
    },

    // 新建用户
    NewUser() {
      this.userdialogVisible = true;
      this.title = "新增用户";
      this.getLists();
    },

    // 删除用户
    DelUser(id) {
      this.$confirm("用户删除后将无法撤回, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteStoresUserInfo({ id: id })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$modal.msgSuccess("操作成功");
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}
.separate_right {
  width: 1px;
  height: 14px;
  //   background: #e9e9e9;
  margin-left: 12px;
  margin-right: 12px;
}

.source_box {
  margin: 0 24px;
}

.searchBox {
  display: flex;
  align-items: center;
  .user_input {
    width: 400px;
    margin: 20px;
  }
}
.pwd {
  text-security: disc;
  -webkit-text-security: disc;
}

.emptyBox {
  position: relative;
  .empty {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
}
</style>
